<template>
  <div class="index-config" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中~">
    <!--操作按钮-->
    <el-button type="success" size="small" @click="createIndexBanner">新建</el-button>
    <el-button type="primary" size="small" @click="orderIndexBannerList">排序</el-button>
    <!--数据列表-->
    <el-table empty-text="暂无数据"
              class="index-config"
              :data="originalData.indexBlock">
      <el-table-column width="120" type="index" label="ID"></el-table-column>
      <el-table-column v-if="orderButtonVisible" width="120" label="排序">
        <template scope="scope">
          <div class="order-buttons">
            <el-button
              class="orderBtn"
              size="mini"
              type="primary"
              icon="arrow-up"
              @click="riseUpItem(scope.$index, scope.row)"
              v-if="scope.$index===0?false:true"
            >
            </el-button>
            <el-button
              class="orderBtn"
              size="mini"
              type="primary"
              icon="arrow-down"
              @click="declineItem(scope.$index, scope.row)"
              v-if="scope.$index===originalLength-1?false:true"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="operation" width="120"
                       label="业务"></el-table-column>
      <el-table-column prop="title"
                       label="权益标题"></el-table-column>
      <el-table-column prop="url"
                       label="链接"></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            size="small"
            @click="handleView(scope.$index, scope.row)">查看
          </el-button>
          <el-button
            size="small"
            type="success"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--查看、编辑、新增窗口-->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               :modal="true">
      <el-form
        :model="selectDialogData"
        :rules="formFules"
        ref="selectDialogData">
        <el-form-item label="业务" :label-width='lableWidth' prop="operation">
          <el-input required :disabled="dialogEdit" placeholder="空" v-model="selectDialogData.operation"></el-input>
        </el-form-item>
        <el-form-item label="权益标题" :label-width='lableWidth' prop="title">
          <el-input required :disabled="dialogEdit" placeholder="空" v-model="selectDialogData.title"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="权益内容" :label-width='lableWidth' prop="content">
          <el-input class="profile-content-input"
                    required placeholder="空" type="textarea"
                    :disabled="dialogEdit"
                    v-model="selectDialogData.content"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width='lableWidth' prop="url">
          <el-input :disabled="dialogEdit" placeholder="空" v-model="selectDialogData.url"
                    auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" v-if="dialogEdit">取 消</el-button>
        <!--<el-button type="primary" @click="editProfileInfo" v-if="dialogEdit">编 辑</el-button>-->
        <el-button type="success" @click="saveProfileInfo('selectDialogData')" v-else>保 存</el-button>
      </div>
    </el-dialog>
    <!--删除窗口-->
    <el-dialog
      title="提示"
      :visible.sync="deleteDialogVisible"
      size="tiny">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  export default{
    props: [''],
    data () {
      return {
        originalData: {},
        originalLength: 6,
        ctrlIndex: null,
        dialogFormVisible: false,
        deleteDialogVisible: false,
        orderButtonVisible: false,
        dialogTitle: '查看',
        dialogEdit: true,
        selectDialogData: {
          operation: '',
          title: '',
          content: '',
          url: ''
        },
        lableWidth: '120px',
        loading: false,
        formFules: {
          operation: [{required: true, message: '请输入业务名称', trigger: 'change'}],
          title: [{required: true, message: '请输入权益标题', trigger: 'change'}],
          content: [{required: true, message: '请输入权益内容', trigger: 'change'}],
          url: [{required: false}]
        }
      }
    },
    methods: {
      // 获取数据
      loadingProfileBannerList () {
        this.loading = true
        axios.get('/node/api/profile').then((res) => {
          if (JSON.stringify(res.data) === '{}') {
            this.originalData.indexBlock = []
          } else {
            this.originalData = res.data.profileIndexInfo
            this.originalLength = res.data.profileIndexInfo.indexBlock.length
          }
          this.loading = false
        })
      },
      // 向服务器更新数据
      updataForm () {
        // 准备数据
        let param = {profileIndexInfo: this.originalData}
        // 发起请求
        axios.post('/node/api/add-profile', param).then((res) => {
          this.originalData = res.data.profileIndexInfo
          this.$notify({
            title: '成功',
            message: '保存成功！',
            type: 'success'
          })
        })
      },
      // 表格判空
      isNullOrEmpty (row, col, prop) {
        if (row[col.property] === null || row[col.property] === undefined) {
          return '空'
        }
      },
      // 查看数据
      handleView (index, row) {
        this.dialogTitle = '查看权益'
        this.dialogEdit = true
        this.selectDialogData = row
        this.dialogFormVisible = !this.dialogFormVisible
        this.ctrlIndex = index
      },
      // 创建Banner数据
      createIndexBanner () {
        this.dialogTitle = '新建权益'
        this.ctrlIndex = null
        this.selectDialogData = {}
        this.dialogFormVisible = !this.dialogFormVisible
        this.dialogEdit = false
      },
      // 编辑数据
      handleEdit (index, row) {
        this.dialogTitle = '编辑权益'
        this.dialogEdit = !this.dialogEdit
        this.selectDialogData = row
        this.dialogFormVisible = !this.dialogFormVisible
        this.dialogEdit = false
        this.ctrlIndex = index
      },
      // 删除数据
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '暂不',
          type: 'warning'
        }).then(() => {
          this.originalData.indexBlock.splice(index, 1)
          this.originalLength = this.originalData.indexBlock.length
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.updataForm()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        this.ctrlIndex = null
      },
      // 保存
      saveProfileInfo (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.ctrlIndex === null) {
              // 向数组添加数据
              this.originalData.indexBlock.push(this.selectDialogData)
              console.log(this.originalData.indexBlock)
            } else {
              // 更改数组数据
              this.originalData.indexBlock[this.ctrlIndex] = this.selectDialogData
            }
            this.updataForm()
            this.selectDialogData = {}
            this.dialogFormVisible = !this.dialogFormVisible
            this.dialogEdit = true
            this.originalLength = this.originalData.indexBlock.length
          } else {
            return false
          }
        })
      },
      // 列表单元升序
      riseUpItem (index, row) {
        let mid = this.originalData.indexBlock[index]
        console.log(mid)
        this.originalData.indexBlock[index] = this.originalData.indexBlock[index - 1]
        this.originalData.indexBlock[index - 1] = mid
        this.updataForm()
      },
      // 列表单元降序
      declineItem (index, row, scope) {
        let mid = this.originalData.indexBlock[index]
        this.originalData.indexBlock[index] = this.originalData.indexBlock[index + 1]
        this.originalData.indexBlock[index + 1] = mid
        this.updataForm()
      },
      // 编辑按钮
      editProfileInfo () {
        this.dialogEdit = false
      },
      cancelDialog () {
        this.dialogFormVisible = !this.dialogFormVisible
        this.dialogEdit = !this.dialogEdit
      },
      handleClose () {
      },
      orderIndexBannerList () {
        this.orderButtonVisible = !this.orderButtonVisible
      }
    },
    created () {
      this.loadingProfileBannerList()
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .profile-content-input {
    input {
      height: 100px;
    }
  }
</style>
